* {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
  background-image: linear-gradient(100deg,#fff1eb,#ace0f9);
}
.box {
  display: flex;
 height: 100%;
}
.left {
  flex: 5;
  margin: 1.25rem 1.25rem;
  font-size: 0.75rem;
  /* box-sizing: border-box; */
}
.left input  {
  width: 9.417rem;
  height: 2.667rem;
  border: none;
  outline: medium;
  border-radius: 0.208rem;
  padding-left: 0.208rem;
  margin-bottom: 0.625rem;
}
.left  .btn {
  width: 4.917rem;
  height: 2.667rem;
  color: #fff;
  font-size: 0.708rem;
  padding-left: 0rem;
  background-color:  #9198e5;
}
.left table {
  overflow: hidden;
  width: 40rem;
  border: 1px solid #9297e3;
  border-spacing: 0;
  border-radius: 0.333rem;
  border-bottom: 0;
}
.left table td ,
.left table th{
  height: 1.25rem;
  text-align: center; 
  border-collapse: collapse;
  border-right: 1px solid #9297e3;
  border-bottom: 1px solid #9297e3;
}
.left table th:last-child {
  border-right: 0;
}
.left table td:nth-child(3n)  {
  border-right: 0;
} 
.left table th {
  background-color:#ace0f9;
}
.right {
  width: 30rem;
  flex: 3;
  margin-top: 1.25rem ;
  margin-right: 4.167rem;
}
.line {
  height: 500px;
  height: 400px;
  margin-bottom: 50px;
}
.bar {
  height: 550px;
  height: 400px;
}